/*
  学习目标：修改state
  语法: this.setState({更新的数据变量名: 新值})
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 0,
    list: [1, 2, 3],
  };

  handleAdd = () => {
    // this.setState({ count: this.state.count + 1 });
    // 💥 更新数据要求: 不可变数据

    // ❌ 不能直接修改原始数据,
    // this.state.count++;
    const list = [...this.state.list];
    list.push(4);

    // 🔔新值覆盖旧值
    this.setState({ list: list });
  };

  render() {
    return (
      <div>
        <h2>{this.state.list}</h2>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleAdd}>+1</button>
      </div>
    );
  }
}
